<template>
  <div style="display: flex; flex-direction: column; height: 100vh; justify-content: center; align-items: center; background-color: #f5f5f5;">
    <el-card style="width: 80%; max-width: 600px; text-align: center; padding: 40px; box-shadow: 0 0 10px rgba(0,0,0,.1);">
      <h1 style="color: #ff4d4f;">404</h1>
      <p style="font-size: 18px; color: #666;">抱歉，您访问的页面不存在。</p>
      <el-button type="primary" @click="goHome">返回首页</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "NotFound",
  methods: {
    goHome() {
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
}
p {
  margin-bottom: 30px;
}
</style>